<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters for drawing
    const l = 280; // length of the rod
    const rodHalfHeight = 2;
    const theta = Math.PI / 7; // Angle in radians (approx 25.7 degrees)

    // Coordinates
    const a = { x: 100, y: 250 };
    const b = { x: a.x + l, y: a.y };
    const h = l * Math.tan(theta);
    const c = { x: a.x, y: a.y - h };

    // --- Start Drawing ---

    // 1. Draw the Wall
    ctx.beginPath();
    ctx.moveTo(a.x, c.y - 50);
    ctx.lineTo(a.x, a.y + 50);
    ctx.stroke();

    // Draw wall hatch marks
    ctx.save();
    ctx.lineWidth = 1;
    for (let i = c.y - 50; i <= a.y + 50; i += 15) {
        ctx.beginPath();
        ctx.moveTo(a.x, i);
        ctx.lineTo(a.x - 10, i + 10);
        ctx.stroke();
    }
    ctx.restore();

    // 2. Draw the Rod AB
    ctx.beginPath();
    ctx.moveTo(a.x, a.y - rodHalfHeight);
    ctx.lineTo(b.x, b.y - rodHalfHeight);
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(a.x, a.y + rodHalfHeight);
    ctx.lineTo(b.x, b.y + rodHalfHeight);
    ctx.stroke();

    // Close the end at B
    ctx.beginPath();
    ctx.moveTo(b.x, b.y - rodHalfHeight);
    ctx.lineTo(b.x, b.y + rodHalfHeight);
    ctx.stroke();

    // 3. Draw the Rope BC
    ctx.beginPath();
    ctx.moveTo(b.x, b.y - rodHalfHeight); // Connect to the top corner of the rod
    ctx.lineTo(c.x, c.y);
    ctx.stroke();

    // 4. Draw the Angle and its Label
    const arcRadius = 40;
    ctx.beginPath();
    // The angle is between the line BA (angle PI) and BC (angle PI - theta)
    ctx.arc(b.x, b.y, arcRadius, Math.PI - theta, Math.PI);
    ctx.stroke();

    ctx.font = 'italic 22px "Times New Roman"';
    // Position the theta label inside the arc
    const angleLabelRadius = arcRadius * 0.65;
    const midAngle = Math.PI - theta / 2;
    const angleTextX = b.x + angleLabelRadius * Math.cos(midAngle);
    const angleTextY = b.y - angleLabelRadius * Math.sin(midAngle);
    ctx.fillText('θ', angleTextX, angleTextY);


    // 5. Add Point Labels (A, B, C)
    ctx.font = '24px "Times New Roman"';
    ctx.fillText('A', a.x - 25, a.y);
    ctx.fillText('B', b.x + 20, b.y);
    ctx.fillText('C', c.x - 25, c.y);

    // 6. Add Rod Properties Label (l, W₀)
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('l, W₀', a.x + l / 2, a.y + 35);

    // 7. Add Caption
    ctx.font = '20px "SimSun"';
    ctx.fillText('力图 5.2.1', canvas.width / 2, 390);

</script>
</body>
</html>